<template>
    <el-button style="margin-left: 10px" @click="autoCreate">点击查看</el-button>

    <cl-dialog v-model="visible" title="查看地图" width="95%">
        <el-scrollbar class="scrollbar">
            <div v-for="(item,index) in level" class="row-level" :key="index+'A'">
                <div v-for="(item1,index1) in item" class="col-level" :key="index1+'B'" :style="item1=='47'||item1=='54'||item1=='55'||item1=='56'||item1=='45'||item1=='46'||item1=='29'?'z-index:1':'z-index:'+index1+2">
                    <img v-if="item1!=0" style="object-fit: content;" :style="item1==19||item1==20?'margin-left:-12px;margin-top:20px':''" :src="getImageUrl(item1)" alt="">
                </div>
            </div>
        </el-scrollbar>
    </cl-dialog>
</template>

<script setup name="build-map" lang="ts">
import { useForm } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { ref, computed } from 'vue';

const props = defineProps({
	levels: {
		type: String,
		default: () => ''
	}
});
const emit = defineEmits(['open', 'close']);
const level = eval(JSON.parse(props.levels));
const visible = ref(false);
function getImageUrl(item) {
	return new URL(`../../assets/${item}.png`, import.meta.url).href;
}
// 搭建地图
async function autoCreate() {
	emit('open');
	visible.value = true;
}
</script>

<style lang="scss" scoped>
.scrollbar {
	max-height: 800px;
	background: #2f6d7c;
	.row-level {
		display: flex;
		justify-content: center;
		.col-level {
			width: 50px;
			height: 50px;
			margin-bottom: -20px;
		}
	}
}
</style>
